<template>
  <div class="myFollowList">
    <img v-if="follow.head_img" :src="$axios.defaults.baseURL + follow.head_img" alt class="avatar" />
    <img v-else src="@/assets/logo.png" alt class="avatar" />

    <div class="undefined">
      <div class="myFollowName">
        <div class="name">{{ follow.nickname }}</div>
        <div class="date">{{ (follow.create_date).split('T')[0] }}</div>
      </div>

      <!-- 取关 -->
      <div v-if="follow.isFollow" class="unfollow" @click="unfollowClick()">
        <div class="iconfont icondui"></div>
        <span>取消</span>
      </div>

      <!-- 关注 -->
      <div v-else class="follow" @click="followClick()">
        <div class="iconfont iconguanzhu"></div>
        <span>关注</span>
      </div>

      <div class="line"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["follow"],
  methods: {
    unfollowClick() {
      this.$emit("unfollow");
    },
    followClick() {
      this.$emit("follow");
    }
  }
};
</script>

<style lang="less" scoped>
.myFollowList {
  display: flex;
  padding: 5.556vw 0;
  align-items: center;

  .avatar {
    width: 15.556vw;
    height: 15.556vw;
    object-fit: cover;
    border-radius: 50%;
    padding: 0 6.111vw;
  }

  .undefined {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    padding-right: 5.556vw;

    .myFollowName {
      flex: 1;

      .name {
        font-size: 3.889vw;
        color: #333;
      }

      .date {
        font-size: 3.889vw;
        color: #bbb;
        padding-top: 1.111vw;
      }
    }

    .unfollow,
    .follow {
      display: flex;
      justify-content: center;
      height: 8.333vw;
      width: 19.444vw;
      background-color: #ecedef;
      line-height: 8.333vw;
      font-size: 2.778vw;
      border-radius: 3.889vw;
      color: #bbbcbe;

      .iconguanzhu {
        font-size: 3.333vw;
      }

      span {
        padding-left: 1.111vw;
      }
    }

    .follow {
      color: #fff;
      background-color: red;

      .icondui {
        font-size: 3.333vw;
      }
    }

    .line {
      position: absolute;
      background: #e4e4e4;
      width: 100%;
      height: 0.278vw;
      bottom: -5.556vw;
    }
  }
}
</style>